import React, { Component } from 'react';

class View extends Component {
    constructor(props){
        super(props)
        this.state = {
            resCls:'_empty',
            _index:99999,
            resume:{
                exp:{
                    name:'',
                    age:''
                }
            },
            resumes:{
                exp:[]
            }
        }
    }
    jl(name){
        // 如果 ajax 请求过来数据不为空
        const {resumes} = this.state;
        if(resumes[name].length!==0){
            this.hdClass('_show_info')
        }
    }
    _init(){
        this.jl('exp')
    }
    componentDidMount(){
        this._init()
    }
    handleChange(e){
        let name = e.target.name;
        let value = e.target.value;
        const resume = this.state.resume;
        const namekey = e.target.getAttribute('namekey');
        resume[namekey][name] = value;
        this.setState({resume})
    }
    hdClass(resCls){
        this.setState({
            resCls:resCls
        })
    }
    lists(){
        const {resumes} = this.state;
        return resumes.exp.map((val,index)=>{
            return(
                <li key={index}>{val.name}-----{val.age} <span onClick={(e)=>{this.biaodan(e,'exp',index,val)}}>编辑</span><span onClick={(e)=>{this.del(e,'exp',index)}}>删除</span></li>
            )
        })
    }
    del(e,name,index){
        const {resumes} = this.state;
        resumes[name].splice(index,1)
        this.setState(resumes)
        if(resumes[name].length===0){
            this.hdClass('_empty')
        }
    }
    biaodan(e,name,index,val={}){
        if(index===99999){
            // 数据初始化
            this.setState({
                resume:Object.assign({},{
                    [name]:{
                        name:'',
                        age:''
                    }
                })
            })
        }else {
            this.setState({
                resume:Object.assign({},{
                    [name]:this.deepClone(val)
                })
            })
        }
        this.setState({
            _index:index
        })
        this.hdClass('_biaodan')
    }
    deepClone(arr) {
    	var obj=Array.isArray(arr)?[]:{};
    	for(var i in arr){
    		if(Object.prototype.toString.call(arr[i])=="[object Object]"||Array.isArray(arr[i])){
    			obj[i]=this.deepClone(arr[i])
    		}else{
    			obj[i]=arr[i];
    		}
    	}
    	return obj;
    }
    cancel(e,name){
        const {resumes} = this.state;
        if(resumes[name].length===0){
            this.hdClass('_empty')
        }else {
            this.hdClass('_show_info')
        }
    }
    editSave(e,name){
        this.hdClass('_show_info');
        const {resume,resumes,_index} = this.state;
        // 如果 _index = 99999 为首次保存
        if(_index===99999){
            resumes[name].push(resume.exp);
            this.setState((state,props)=>({
                resumes:Object.assign({},{
                    [name]:state.resumes[name]
                })
            }))
        }else {
            // console.log(this.deepClone(resume[name]))
            // console.log(resumes[name][_index])
            resumes[name][_index] = resume[name];
            this.setState(resumes)
        }
    }
    render(){
        const {resume,resCls} = this.state;
        return(
            <React.Fragment>
                <div className={`resume ${resCls}`}>
                    <div className="empty">
                    空白添加
                    <input type="button" onClick={(e)=>{this.biaodan(e,'exp',99999)}} value="添加"/>
                    </div>
                    <div className="biaodan">
                        <ul>
                           <li>
                               <label>姓名{resume.exp.name}</label>
                               <div className="lable_ctrl">
                                   <input type="text" name="name" namekey="exp" value={resume.exp.name}
                                   placeholder="请输入姓名" onChange={(e)=>this.handleChange(e)}/>
                               </div>
                           </li>
                           <li>
                               <label>年龄{resume.exp.age}</label>
                               <div className="lable_ctrl">
                                   <input type="text" name="age" namekey="exp" value={resume.exp.age}
                                   placeholder="请输入年龄" onChange={(e)=>this.handleChange(e)}/>
                               </div>
                           </li>
                           <li>
                                <input type="button" onClick={(e)=>{this.editSave(e,'exp')}} value="保存"/>
                                <input type="button" onClick={(e)=>{this.cancel(e,'exp')}} value="取消"/>
                           </li>
                        </ul>
                    </div>
                    <div className="show_info">
                    <input type="button" onClick={(e)=>{this.biaodan(e,'exp',99999)}} value="添加"/>
                        <ul>{resume.exp.length!==0?this.lists():''}</ul>
                    </div>
                </div>
            </React.Fragment>
        )
    }
}
export default View;
